<template>
  <div class="list-wrap">
    <div class="nav-wrap">
      <div class="wrapitem">全域<span class="drop"></span></div>
      <div class="wrapitem">品牌<span class="drop"></span></div>
      <div class="wrapitem">特色<span class="drop"></span></div>
    </div>
    <ul>
      <li class="item" v-for="item in yingyuan" :key="item.id">
        <div class="title-block">
          <div class="line-ellipsis">
            <span>{{ item.nm }}</span>
            <span class="price">{{ item.sellPrice }}</span>
            <span class="p">元起</span>
          </div>
          <div class="location">
            <div class="flex">{{ item.addr }}</div>
          </div>
          <div class="label-block">
            <span class="allowRefund" v-show="item.tag.allowRefund">退</span>
            <span class="endorse" v-show="item.tag.endorse">改签</span>
            <span class="snack" v-show="item.tag.snack">小吃</span>
            <span class="vipTag" v-show="item.tag.vipTag">{{
              item.tag.vipTag
            }}</span>
            <span class="cc" v-show="item.tag.hallType[0] != ''">
              <span
                class="hallType"
                v-for="(i, index) in item.tag.hallType"
                :key="index"
                >{{ i }}</span
              >
            </span>
          </div>
          <div class="discount" v-show="item.promotion.cardPromotionTag != ''">
            <div class="card">
              <img
                src="https://i.maoyan.com/images/dpmmweb/cinemaList/img/base/base64/card.png"
              />
            </div>
            <div class="discount-text">
              {{ item.promotion.cardPromotionTag }}
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "yingyuan",
  data() {
    return {
      yingyuan: [],
    };
  },
  mounted() {
    //使用axios获取数据
    axios
      .get(
        "/ajax/moreCinemas?movieId=0&day=2021-12-09&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1639032340529&cityId=30&optimus_uuid=86B91630533D11EC8849DD729AB9E91ABAED98CE0B6E4278B4EAB3B99FA8E8FA&optimus_risk_level=71&optimus_code=10"
      )
      .then((rel) => {
        console.log(rel);
        this.yingyuan = rel.data.cinemas.cinemas;
        console.log(this.yingyuan);
      });
  },
};
</script>

<style scoped>
.list-wrap {
  width: 100%;
  /* position: relative; */
  background-color: #fff;
}

.nav-wrap {
  position: fixed;
  width: 100%;
  background: #fff;
  height: 1.0666666666666667rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  z-index: 99;
}
.nav-wrap .wrapitem {
  flex: 1;
  text-align: center;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  color: #777;
  /* border-bottom: 1px solid #ccc; */
}
.nav-wrap .wrapitem .drop {
  display: inline-block;
  position: absolute;
  top: 0.21333333333333335rem;
  width: 0;
  height: 0;
  margin-left: 0.08rem;
  border: 0.08rem solid transparent;
  border-top-color: #b0b0b0;
}

.list-wrap ul {
  padding-top: 1.3333333333333333rem;
}

.list-wrap .item {
  padding: 10px 12px 15px 0;
  margin-left: 12px;
  background-color: #fff;
  overflow: hidden;
  cursor: pointer;
}

.title-block {
  display: block;
}
.line-ellipsis {
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  color: #000;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.line-ellipsis span:nth-child(1) {
  font-size: 16px;
}

.price,
.p {
  color: #f03d37;
}

.price {
  font-size: 18px;
}

.location {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

.flex {
  /* flex:1; */
  display: inner-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.label-block {
  height: 20px;
  line-height: 20px;
  font-size: 12px;
}

.cc:nth-child(1) {
  margin-left: 0;
}

.cc {
  margin-left: 3px;
}

.label-block > span {
  position: relative;
  display: inline-block;
  padding:3px 3px;
  height: 12px;
  line-height: 12px;
  border-radius: 1.5px;
  font-size: 0.17rem;
  margin:0 3px 0 0;
  text-align: center;
}

.label-block .allowRefund,
.label-block .endorse,.hallType{
  color: #589daf;
  border: 0.02rem solid #589daf;
}

.label-block .snack,
.label-block .vipTag {
  color: #f90;
  border: 0.02rem solid #f90;
}

.discount {
  color: #999;
  margin-top:5px;
}

.discount .card {
  display: inline-flex;
  width: 12px;
  height: 11px;
  position: relative;
  top: 3px;
}
.discount .card img {
  width: 15px;
  height: 14px;
}

.discount-text {
  display: inline-block;
  margin-left: 0.08rem;
  font-size: 10px;
}
</style>